﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>医禾格格超准中医体质测试,快来看看你的体质是什么?</title>
    <!-- Bootstrap -->
    <link href="__STATIC__/index/css/bootstrap.min.css" rel="stylesheet">
    <link href="__STATIC__/index/css/tz.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="__STATIC__/index/js/html5shiv.js"></script>
      <script src="__STATIC__/index/js/respond.min.js"></script>
    <![endif]-->
    <style>
    .col-xs-2-5 {
        width: 20%;
        float: left;
        position: relative;
        min-height: 1px;
    }
    </style>
</head>

<body>
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
        <div class="container">
            <h1>医禾格格超准中医体质测试</h1>
        </div>
    </header>
    <form action="{:url('index/analyse')}" id="questionForm" method="POST">
        <div class="container question-desc">
            <ul>
                <li>
                    超准体质测试，5 分钟从健康看你的性格！
                </li>
                <!--li> &nbsp; </li>
        <li><b>没有</b>：根本不，似乎没有发生过。</li>
        <li><b>很少</b>：好象有，不过很久没有发生过了。或者好像是偶然的事情，觉得没有必要放在心上。</li>
        <li><b>有时</b>：间或不定出现，好像也没有什么规律，我觉得有一点儿担心。</li>
        <li><b>经常</b>：是的，我有这个问题，好像已经摸到一些规律了。</li>
        <li><b>总是</b>：是的，这是一直以来困扰我的问题。</li-->
            </ul>
        </div>
        <div class="container question-container" id="questions"></div>
        <div class="container option-container">
            <input type="submit" class="hidden-button" />
            <a href="javascript:void(0)" class="submit" id="submitButton"><img src="__STATIC__/index/images/submit.png" /></a>
        </div>
        <div class="container option-statement">
            <h4>提交代表你已接受以下声明</h4>
            <p>本测试不作为诊断和治疗的依据，对于已经医生确诊的疾病，应按照医嘱积极治疗。所提及的内容仅作为生活保健的咨询建议。如遇不适请及时就医。
                <br /><b>本测试不适用于孕妇和乳母</b></p>
        </div>
        <!--copyright-->
        <div class="container copyright-container designed-by">
            <img src="__STATIC__/index/images/designed_by_huofar.png" width="130" />
        </div>
    </form>
    <script src="__STATIC__/index/js/jquery-1.11.0.min.js"></script>
    <script src="__STATIC__/index/js/jquery.tap.js"></script>
    <script type="text/javascript">
        function makeQuestionHtml(questionIndex, questionTagId, questionTitle, allQuestionCount, optionNum, b1, b2, b3, b4, b5) {
            if (optionNum == 2) {
                var optionHtml = '<ul class="row"><li class="col-xs-6" value="1">男</li><li class="col-xs-6" value="2">女</li></ul><input name="question[' + questionTagId + ']" type="hidden"/>';
            } else {
                var optionHtml = '<ul class="row"><li class="col-xs-2-5" value="1">' + b1 + '</li><li class="col-xs-2-5" value="2">' + b2 + '</li><li class="col-xs-2-5" value="3">' + b3 + '</li><li class="col-xs-2-5" value="4">' + b4 + '</li><li class="col-xs-2-5" value="5">' + b5 + '</li></ul><input name="question[' + questionTagId + ']"  type="hidden"/>';
            };

            var html = '<div class="question disabled" question-no="' + questionIndex + '" question-tag="' + questionTagId + '"><h3><span class="question-no"><b>' + questionIndex + '</b>/' + allQuestionCount + '</span><span class="real-title">' + questionTitle + '</span></h3><div class="question-options">' + optionHtml + '</div></div>';

            return html;
        }

        function addSectionHeader(title, extraTag) {
            return '<div class="section_header_placeholder" ' + extraTag + '><div class="section_header"><h2>' + title + '</h2></div></div>';
        }

        function in_array(needle, haystack) {
            for (var i in haystack) {
                if (haystack[i] == needle) return true;
            }
            return false;
        }

        function setQuestionVisibilityByTags(tags, isShow) {
            $(tags).each(function(i) {
                if (isShow) {
                    $('div[question-tag="' + tags[i] + '"]').show();
                } else {
                    $('div[question-tag="' + tags[i] + '"]').find('input').removeAttr('checked');
                    $('div[question-tag="' + tags[i] + '"]').find('li').removeClass('active');
                    $('div[question-tag="' + tags[i] + '"]').hide().attr('class', 'question disabled');
                }
            });
        }

        $(function() {

            var Questions = jQuery.parseJSON('{$question}');

            QuestionTagsWithTwoOptions = jQuery.parseJSON('["70"]');
            QuestionTagForAge = "69";
            QuestionTagsWithSepacilOptionName = jQuery.parseJSON('["42","33","40","45","11","35"]');

            currentQuestion = 1;
            allQuestionNum = Questions.length;

            $(Questions).each(function(i) {
                if (in_array(this.tagID, QuestionTagsWithTwoOptions)) {
                    var questionHtml = makeQuestionHtml(i + 1, this.tagID, this.tag, allQuestionNum, 2);
                } else {
                    if (this.tagID == QuestionTagForAge)
                        var questionHtml = makeQuestionHtml(i + 1, this.tagID, this.tag, allQuestionNum, 4, '28以下', '28~35', '35~45', '45~60', '60以上');
                    else if (in_array(this.tagID, QuestionTagsWithSepacilOptionName))
                        var questionHtml = makeQuestionHtml(i + 1, this.tagID, this.tag, allQuestionNum, 4, '根本不', '有一点', '有些', '相当', '非常');
                    else
                        var questionHtml = makeQuestionHtml(i + 1, this.tagID, this.tag, allQuestionNum, 4, '没有', '很少', '有时', '经常', '总是');
                }

                if (i == 0)
                    $('#questions').append(addSectionHeader('根据最近三个月的体验和感觉回答', ''));
                $('#questions').append(questionHtml);
            });

            $('#questions').find('.question[question-no="1"]').removeClass('disabled');
            $('#questions').find('.question[question-no="1"]').addClass('active');

            //CLICK OPTION!
            $(".question-options li").bind('click', function() {

                //控制题目显示状态
                if ($(this).parents('.question').attr('question-no') == currentQuestion) {
                    $(this).parents('.question').attr('class', 'question normal');

                    if (currentQuestion < allQuestionNum) {
                        $('#questions').find('[question-no="' + (currentQuestion + 1) + '"]').attr('class', 'question active');
                        $(window).scrollTop($('#questions').find('[question-no="' + (currentQuestion + 1) + '"]').offset().top - 60);
                        $('body').find('.section_header').removeClass('fixed');
                        $(this).parents('.question').prev('.section_header').addClass('fixed');
                    };

                    currentQuestion++;
                };

                //操作选项
                var thisTag = $(this).parents('.question').attr('question-tag');
                $('input[name="question[' + thisTag + ']"]').attr("value", $(this).attr("value"));
                $(this).parent().find('li').removeClass('active');
                $(this).addClass('active');

                //判断男女选项
                if (thisTag == 70) {
                    //alert($(this).attr("value"));
                    var text = ($(this).attr("value") == 1) ? '您的阴囊部位潮湿吗？' : '您带下色黄(白带颜色发黄)吗？';
                    $('div[question-tag="2930"]').find('h3').find('.real-title').html(text);
                }

                //maximumOffset = $('.basicinfo-container').offset().top - 70;
                maximumOffset = $('.question-container').offset().top - 70;
            });

            $(".question-options li").on('tap', function() {
                $(this).css('background', '#E57990');
            });

            $(".dontknow").on('tap', function() {
                $(this).css('background', '#AAA');
            });

            //提交，检测表单完成情况
            $('#submitButton').click(function() {
                var alreadyTested = $('#questions').find('input[value]').length;
                var isErrorComing = false;

                //答题完成度检测
                if (alreadyTested < allQuestionNum && !isErrorComing) {
                    if (alreadyTested == 0) {
                        $(window).scrollTop($('.question:first').offset().top);
                        alert('请先完成测试再提交！');
                    } else {
                        $(window).scrollTop($('#questions').find('.question[question-no="' + (currentQuestion - 1) + '"]').offset().top);
                        alert('你还有题目尚未回答！');
                    }
                    isErrorComing = true;
                }

                if (isErrorComing == true) {
                    return false;
                }

                //if everything is fine, submit the form.
                $('#questionForm').appendTo($("body")).submit();
            });

            minimumOffset = $('.section_header').first().offset().top;

            $(window).scroll(function(event) {
                maximumOffset = $('.option-container').offset().top - 70;
                var currentScrollTop = $(this).scrollTop();
                if (currentScrollTop < minimumOffset || currentScrollTop > maximumOffset) {
                    $('body').find('.section_header').removeClass('fixed');
                } else {
                    $('.section_header:visible').each(function() {
                        if (currentScrollTop >= $(this).offset().top) {
                            if (!$(this).hasClass('fixed')) {
                                $('body').find('.section_header').removeClass('fixed');
                                $(this).addClass('fixed');
                            }
                        }
                    });
                }
            });
        });
    </script>
    <script>
        var imgUrl = 'http://img.huofar.com/images/huofar_leaf_white.png';
        var lineLink = ''; //分享链接
        var descContent = "快来看看你的体质是什么！";
        var shareTitle = '医禾格格超准中医体质测试！';
        var appid = 'wx806c699abae9109a';

        function shareFriend() {
            WeixinJSBridge.invoke('sendAppMessage', {
                "appid": appid,
                "img_url": imgUrl,
                "img_width": "640",
                "img_height": "640",
                "link": lineLink,
                "desc": descContent,
                "title": shareTitle
            }, function(res) {
                _report('send_msg', res.err_msg);
            })
        }

        function shareTimeline() {
            WeixinJSBridge.invoke('shareTimeline', {
                "img_url": imgUrl,
                "img_width": "640",
                "img_height": "640",
                "link": lineLink,
                "desc": descContent,
                "title": shareTitle
            }, function(res) {
                _report('timeline', res.err_msg);
            });
        }

        function shareWeibo() {
            WeixinJSBridge.invoke('shareWeibo', {
                "content": descContent,
                "url": lineLink,
            }, function(res) {
                _report('weibo', res.err_msg);
            });
        }

        // 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            // 发送给好友
            WeixinJSBridge.on('menu:share:appmessage', function(argv) { shareFriend(); });
            // 分享到朋友圈
            WeixinJSBridge.on('menu:share:timeline', function(argv) { shareTimeline(); });
            // 分享到微博
            WeixinJSBridge.on('menu:share:weibo', function(argv) { shareWeibo(); });
        }, false);
    </script>
</body>

</html>